<template>
  <div>
    <el-form size="mini" ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item label="联系人" prop="contact">
            <el-select v-model="form.contact" placeholder="请选择活动区域" @change="contact">
              <el-option v-for="item in people" :key="item.id" :label="item.contact_name + item.company_phone" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="意向标签">
            <ul class="tag">
              <li v-for="(item, index) in tagList" :key="index" :class="item.name == tagIndex ? 'active' : ''" @click="tagIndex = item.name">
                <h2>{{ item.name }}</h2>
                <span>{{ item.describe }}</span>
              </li>
            </ul>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="设置标签">
            <ul class="timertag">
              <li v-for="item in trelist" :key="item.id">
                <h3>{{ item.name }}</h3>
              </li>
              <el-button size="mini" type="primary" @click="open()" style="height: 40px">添加标签</el-button>
            </ul>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="时间选择" prop="next_alarm_date">
            <div style="display: flex">
              <el-date-picker v-model="form.next_alarm_date" type="date" align="right" class="treepicker" :picker-options="pickerOptions" value-format="yyyy-MM-dd" placeholder="选择日期时间"> </el-date-picker>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="text-align: center">
        <el-button size="mini" type="primary" @click="submitForm('form')">提交</el-button>
        <el-button size="mini" type="danger" @click="handleTransfer">转移</el-button>
        <el-button size="mini" type="danger" @click="resetForm('form')">标记无效</el-button>
        <el-button size="mini" type="danger" @click="handleReturn">踢出</el-button>
        <el-button size="mini" type="primary" @click="handleSendMessage">发送短信</el-button>
        <el-button size="mini" type="primary" @click="handlePublish">代发布资产处置信息</el-button>
      </el-form-item>
    </el-form>
    <!-- tree -->
    <el-dialog title="选择标签" append-to-body :visible.sync="treelable" destroy-on-close>
      <addhtml @cancel="cancel"></addhtml>
    </el-dialog>
    <el-dialog title="转移" append-to-body :visible.sync="visibleTransfer" destroy-on-close width="30%">
      <transfer-customer :id="$route.query.id" @close="visibleTransfer = false"></transfer-customer>
    </el-dialog>
    <el-dialog title="发送短信" append-to-body :visible.sync="visibleMessage" destroy-on-close width="30%">
      <send-message :id="$route.query.id" :phone="this.people && this.people[0] && this.people[0].company_phone" @close="visibleMessage = false"></send-message>
    </el-dialog>
    <el-dialog title="代发布资产处置信息" append-to-body :visible.sync="visiblePublish" destroy-on-close width="30%">
      <publish-information :id="$route.query.id" :phone="this.people && this.people[0] && this.people[0].company_phone" :name="this.people && this.people[0] && this.people[0].contact_name" @close="visiblePublish = false"></publish-information>
    </el-dialog>
  </div>
</template>
<script>
import {
  company_people, //联系人信息
  company_labels, //标签选择数据回显
  follow_add, //跟踪记录提交
  ai_task_add_black, //标记无效
  apiCompanyReturn,
} from '@/api/customer'
import addhtml from './addList' //添加标签模板
import TransferCustomer from './transferCustomer.vue'
import SendMessage from './sendMessage.vue'
import PublishInformation from './publishInformation.vue'
export default {
  components: { addhtml, TransferCustomer, SendMessage, PublishInformation },
  data() {
    return {
      treelable: false, //树形弹出层
      visibleTransfer: false,
      visibleReturn: false,
      visibleMessage: false,
      visiblePublish: false,
      trelist: [], //树形列表
      people: [], //联系人
      tagList: [
        { id: '0', name: 'A', describe: '确认发布' },
        { id: '1', name: 'B', describe: '准备发布' },
        { id: '2', name: 'C', describe: '有明确意向' },
        { id: '3', name: 'D', describe: '有意向' },
        { id: '4', name: 'E', describe: '意向模糊' },
        { id: '5', name: 'F', describe: '没有意向' },
      ],
      // form
      form: {
        contact_name: '',
        contact_phone: '',
        desc: '',
        next_alarm_date: '',
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now()
        },
        shortcuts: [
          {
            text: '1天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '3天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 3)
              picker.$emit('pick', date)
            },
          },
          {
            text: '7天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
          {
            text: '10天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 10)
              picker.$emit('pick', date)
            },
          },
          {
            text: '15天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 15)
              picker.$emit('pick', date)
            },
          },
          {
            text: '30天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            },
          },
        ],
      },
      tagIndex: 'A', //意向标签索引
      rules: {
        contact: [{ required: true, message: '请选择联系人', trigger: 'blur' }],
        // desc: [ { required: true, message: '请输入备注', trigger: 'blur' },],
        // next_alarm_date: [ { required: true, message: '请选择时间', trigger: 'blur' },],
      },
    }
  },
  mounted() {
    company_people({ id: this.$route.query.id }).then((res) => {
      this.people = res.data
    })
    this.treeList()
  },
  methods: {
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return
        let data = {
          company_id: this.$route.query.id,
          contact_name: this.form.contact_name,
          contact_phone: this.form.contact_phone,
          label: this.tagIndex,
          desc: this.form.desc,
          next_alarm_date: this.form.next_alarm_date,
        }
        follow_add(data).then((res) => {
          if (res.code == 200) {
            this.$emit('formName', 3)
            this.$message.success('保存成功')
          }
        })
      })
    },
    // 打开选择标签弹出
    open() {
      this.treelable = true
    },
    // 关闭tree
    cancel(e) {
      if (e) {
        this.treeList(e)
      }

      this.treelable = !this.treelable
    },
    //树形数据列表回显
    treeList(e) {
      company_labels({ id: this.$route.query.id }).then((res) => {
        console.log(res)
        this.trelist = res.data
      })
    },
    disabledDate(current) {
      console.log(current)
    },
    // 联系人选择
    contact(e) {
      console.log(e)
      this.form.contact_name = e.contact_name
      this.form.contact_phone = e.company_phone
    },
    //标记无效
    resetForm(formName) {
      // this.$refs[formName].validate((valid) => {
      // if (!valid) return
      let info = {
        id: this.$route.query.id,
        sts: '1',
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      ai_task_add_black(formData).then((res) => {
        if (res.code == 200) {
          this.$message.success('标记无效成功')
          // this.submitForm('form')
          this.$emit('formName', 4)
        }
      })
      // })
    },
    // 转移
    handleTransfer() {
      this.visibleTransfer = true
    },
    // 踢出
    handleReturn() {
      this.$confirm('确认将该客户踢回公海?', '踢出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        apiCompanyReturn({ id: this.$route.query.id }).then((res) => {
          this.$message.success('操作成功')
          this.$emit('formName', 0)
        })
      })
    },
    // 发送短信
    handleSendMessage() {
      this.visibleMessage = true
    },
    // 发布资产处置信息
    handlePublish() {
      this.visiblePublish = true
    },
  },
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
ul {
  padding: 0;
  list-style: none;
  width: 100%;
  display: flex;
  margin: 0;
  flex-wrap: wrap;
}
.tag li {
  margin-right: 10px;
  font-size: 0;
  display: flex;
  flex-direction: column;
  background: #ccc;
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
  color: #000;
  text-align: center;
  border-radius: 4px;
}
.tag li span {
  line-height: 1.5em;
  font-size: 12px;
}
.timertag {
  margin-left: 10px;
}
.timertag li {
  border: 1px solid #ccc;
  cursor: pointer;
  padding: 7px;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
}
ul li h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5em;
}
ul li h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: inherit;
}
.active {
  background: #409eff !important;
  color: #fff !important;
}
.buttons {
  margin-top: 20px;
  text-align: center;
}
.treepicker {
  width: 100%;
}
</style>
